function Fang(ele){
this.product_left = ele.querySelector('.product_left')
this.box = ele.querySelector('.box')
this.imgs =this.box.querySelectorAll('img')
this.leftBox = ele.querySelector('.leftBox')
this.img = this.leftBox.querySelector('img')
this.list = ele.querySelector('.list')
this.mask = ele.querySelector('.mask')
this.rightBox = ele.querySelector('#rightBox')
this.rightImg =this.rightBox.querySelector('img')
this.a1 = ele.querySelectorAll('a')
 //调用入口函数
 this.fangda() 
 this.qiehuan()
 this.move1()
}
//切换图片
Fang.prototype.qiehuan=function(){
   var _this = this
   this.product_left.addEventListener('mousemove',function(e){
    if(e.target.id=='img'){
        _this.img.src = e.target.src
        _this.rightImg.src = e.target.src
        _this.imgs.forEach(v=> {
           v.className = ''
       });
        e.target.className = 'current'
    }
})
}
//在原型空间中创建一个放大的方法
Fang.prototype.fangda=function(){
    //给左边的盒子绑定鼠标移入事件
    var _this = this
this.leftBox.onmouseover = function(e){
    _this.mask.style.display = "block"
    _this.rightBox.style.display = "block"
}
this.leftBox.onmousemove = function(e){
    var e = e || window.event
    var top1 = e.pageY - _this.leftBox.offsetTop - parseInt(_this.mask.offsetHeight/2)
    var left1 = e.pageX - _this.leftBox.offsetLeft - parseInt(_this.mask.offsetWidth/2)
    //获取边界条件
    var maxX = _this.leftBox.offsetWidth-_this.mask.offsetWidth
    var maxY = _this.leftBox.offsetHeight-_this.mask.offsetHeight
    //设置右边图片的移动距离
    var rightTop,rightLeft
    //水平方向
    if(left1<=0){
        _this.mask.style.left = 0+'px'
        rightLeft = 0
    }else if(left1>=maxX){
        _this.mask.style.left = maxX + 'px'
        rightLeft=maxX
    }else{
        _this.mask.style.left = left1 + 'px'
        rightLeft = left1
    }
    //垂直方向
    if(top1<=0){
        _this.mask.style.top = 0+'px'
        rightTop = 0
    }else if(top1>=maxY){
        _this.mask.style.top = maxY + 'px'
        rightTop=maxY
    }else{
        _this.mask.style.top = top1 + 'px'
        rightTop = top1
    }
    //让右边图片移动
    _this.rightImg.style.top = -2*rightTop+'px'
    _this.rightImg.style.left = -2*rightLeft+'px'
}
this.leftBox.onmouseout = function(){
    _this.mask.style.display = "none"
    _this.rightBox.style.display = "none"
}
}
Fang.prototype.move1 = function(){
    var _this = this

    var imgW = this.imgs[0].clientWidth
    var imgIndex = 0
    var dsq1
    var start
 
    //创建move函数
    function move(){
        //设置初始值
        start =  _this.list.offsetLeft

        //设置终点值
        var end = imgIndex*imgW
        console.log(end)
        //设置速度
        var speed = (end-start)/20
        console.log(speed)
        //设置定时器
        dsq1 = setInterval(function(){
            if(start==end){
                clearInterval(dsq1)            
            }else{
               
                start +=speed
                _this.list.style.left = start+'px'
            }
        },20)
    } 
   var boolleft = true
_this.a1[0].onclick = function(){
       if(boolleft){
          boolleft=false
            if(imgIndex){
             imgIndex+=5
         
             move()
            }
       //设置延迟,等move执行完再打开点击开关
       setTimeout(() => {
        _this.list.style.left = start+'px' 
        boolleft = true
       }, 500);
       }
   }
   var boolright = true
 _this.a1[1].onclick = function(){
    
    if(boolright){
           boolright=false
        
       if(imgIndex<=0&&imgIndex>=-(_this.imgs.length)/3){
          imgIndex-=5
       
          move()
       }
        //设置延迟,等move执行完再打开点击开关
      setTimeout(() => {
        _this.list.style.left = start+'px' 
        
        boolright = true
      }, 500);
       
    }
}

}
